<template>
	<div class="content">
		<div class="list_box">
			<div class="title">
				<div class="shuxian"></div>
				<div class="name">菜单权限</div>
			</div>
			<div class="main_box">
				<!-- :disabled="!LoginPowerslist['role_e']" -->
				<!-- <a-checkbox v-model:checked="allmenuChecekd" @change="onALLmenuChecekd">全选</a-checkbox>  @check="menuTree"-->
				<a-tree  v-model:expandedKeys="expandedmenuKeys" v-model:selectedKeys="selectedmenuKeys" v-model:checkedKeys="checkedmenuKeys" :tree-data="dataMenu"
					checkable :field-names="fieldNames" 
				>
				</a-tree>
			</div>
		</div>
		<div class="list_box">
			<div class="title">
				<div class="shuxian"></div>
				<div class="name">功能权限</div>
			</div>
			<div class="main_box">
				<!-- :disabled="!LoginPowerslist['role_e']" -->
				<!-- <a-checkbox v-model:checked="allpowerChecekd" @change="onALLpowerChecekd">全选</a-checkbox>  @check="powerTree"-->
				<a-tree  v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys" :tree-data="dataPower"
					checkable :field-names="fieldNames"
				> 
				</a-tree>
			</div>
			<!-- v-if="LoginPowerslist['role_e']" -->
			<!-- <div class="foot_btns">
			 <MyButton class='reaset' title="取消" @click="onCancel" v-if="classfiy == 'role'" />
			  <MyButton class='reaset' title="取消" @click="$emit('onCancel')" v-else />
			  <MyButton class='submit' title="保存" @click="onsubmit"/>
			</div> -->
			<div class="bottom-btn">
				<MyButton class='reaset' title="取消" @click="onCancel" v-if="classfiy == 'role'" />
				<MyButton class="reaset" @click="$emit('onCancel')" title="取消" v-else />
				<MyButton class="submit" @click="onsubmit" title="保存" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, watch, computed } from 'vue';
	import { useOrganization } from '@/store';
	
	const PROPS = defineProps({
		editPowers:{
			type: Object,
			default() {
				return {};
			},
		},
		classfiy:{
			type: String,
			default() {
				return 'commont';
			},
		}
	});
	const EMITS = defineEmits(['onsubmit'])
	// const permission = usePermission();
	const fieldNames= {
	    key:'id'
	};
	
	const organizationStore = useOrganization();
	organizationStore.getPowerList();
	organizationStore.getMenuList();
	
	const expandedmenuKeys = ref([]);
	const selectedmenuKeys = ref([]);
	const checkedmenuKeys = ref([]);
	const expandedKeys = ref([]);
	const selectedKeys = ref([]);
	const checkedKeys = ref([]);
	
	// const treeData = ref([]);
	// const treeMenu  = ref([]);
	
	const dataPower = computed(()=> organizationStore.$state.powerList);
	const dataMenu = computed(()=> organizationStore.$state.menuList);
	// const LoginPowerslist = computed(()=> permission.$state.LoginPowerslist);
	
	// const allmenuChecekd = ref(false);
	// const allpowerChecekd = ref(false);
	
	
	// const onALLmenuChecekd = ()=>{
	// 	if(allmenuChecekd.value){
	// 		checkedmenuKeys.value = dataMenu.value.map((item)=> item.id);
	// 	}else{
	// 		checkedmenuKeys.value = [];
	// 	}
	// };
	
	// const onALLpowerChecekd = ()=>{
	// 	if(allpowerChecekd.value){
	// 		checkedKeys.value = dataPower.value.map((item)=> item.id);
	// 	}else{
	// 		checkedKeys.value = [];
	// 	}
	// };
	
	// const menuTree = ()=>{
	// 	if(dataMenu.value.length == checkedmenuKeys.value.length){
	// 		allmenuChecekd.value = true;
	// 	}else{
	// 		allmenuChecekd.value = false;
	// 	}
	// };
	
	// const powerTree = ()=>{
	// 	if(dataPower.value.length == checkedKeys.value.length){
	// 		allpowerChecekd.value = true;
	// 	}else{
	// 		allpowerChecekd.value = false;
	// 	}
	// };
	
	const onsubmit = ()=>{
		// console.log(checkedKeys.value);
		// console.log(checkedmenuKeys.value);
		EMITS('onsubmit', { api:checkedKeys.value, route:checkedmenuKeys.value });
	};
	
	const onCancel = ()=>{
		const { api,route } = PROPS.editPowers;
		api?checkedKeys.value = api:'';
		route?checkedmenuKeys.value = route:'';
	};
	
	watch(()=>PROPS.editPowers,(values)=>{
		const { api,route } = values;
		console.log('权限', values)
		api?checkedKeys.value = api:'';
		route?checkedmenuKeys.value = route:'';
		// api ? checkedKeys.value = api.map((item)=> item.id) : checkedKeys.value = values;
		// route ? checkedmenuKeys.value = route.map((item)=> item.id) : checkedmenuKeys.value = values;
		// checkedKeys.value.length == dataPower.value.length?allpowerChecekd.value = true:allpowerChecekd.value = false;
		// checkedmenuKeys.value.length == dataMenu.value.length?allmenuChecekd.value = true:allmenuChecekd.value = false;
		// console.log(checkedmenuKeys.value)
	},{ deep:true, immediate:true });
	
	// watch(()=>[dataPower.value, dataMenu.value],()=>{
		// treeData.value = JSON.parse(JSON.stringify(dataPower.value.map((item)=> ({ title:item.title, key:item.id}))));
		// treeMenu.value = JSON.parse(JSON.stringify(dataMenu.value.map((item)=> ({ title:item.title, key:item.id }))));
	// },{ deep:true, immediate:true });
	
</script>

<style lang="less" scoped>
	@import './index.less';
</style>